<template>
  <div>
    <div style="margin:15px ;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >首页</el-breadcrumb-item>
        <el-breadcrumb-item >商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header">
      <div class="input">
        <p>产品名称:</p>
        <el-input v-model="input" placeholder="输入品牌名称"></el-input>
      </div>
      <div class="input_one">
        <!-- <span class="demonstration">默认</span> -->
        <p>添加时间:</p>
        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
        </el-date-picker>
        <el-button type="del" size="small" icon="el-icon-search" @click="addSearch">查询</el-button>
      </div>
    </div>
    <div class="button">
      <p>
        <el-button @click="add" type="success" size="small" icon="el-icon-plus">添加商品</el-button>
        <el-button type="del" clearSelection="delet" size="small" icon="el-icon-delete" @click="removeGoodFn">删除商品</el-button>
      </p>
    </div>
    <div class="box">
      <div class="left">
        <div class="left_header">
          产品类型列表
        </div>
        <div>
          <el-tree :data="data" :props="defaultProps" default-expand-all :render-content="renderContent"></el-tree>
        </div>
      </div>
      <div class="from">
        <div>每页显示:{{this.tiao}}</div>
        <el-table ref="multipleTable" :data="showTableData" tooltip-effect="dark" style="width: 100%; max-height='250'"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50"  >
          </el-table-column>
          <el-table-column label="产品编号" prop="date" width='80' >
          </el-table-column>
          <el-table-column label="商品图片" width='80'>
            <template v-slot="{row}">
              <img class="image" :src="row.product_image" alt="">
            </template>
          </el-table-column>
          <el-table-column  prop="product" label="产品名称" show-overflow-tooltip width='80'>
          </el-table-column>
          <el-table-column prop="specification" label="规格" show-overflow-tooltip width='60'>
          </el-table-column>
          <el-table-column prop="monthly_sales" label="月售数量" show-overflow-tooltip width='80'>
            <template v-slot="{row}">{{ row.monthly_sales }}</template>
          </el-table-column>
          <el-table-column prop="inventory" label="剩余数量" show-overflow-tooltip width='80'>
            <template v-slot="{row}">{{ row.inventory }}</template>
          </el-table-column>
          <el-table-column prop="unit_price" label="单价" show-overflow-tooltip width='60'>
            <template v-slot="{row}">{{ row.unit_price }}</template>
          </el-table-column>
          <el-table-column prop="ethicals" label="处方药" show-overflow-tooltip width='70'>
            <template v-slot="{row}">
              <div v-if="row.ethicals==1">是</div>
              <div v-else>否</div>
            </template>
          </el-table-column>
          <el-table-column prop="Drug_function" label="功效" show-overflow-tooltip width='60'>
            <template v-slot="{row}">{{ row.Drug_function }}</template>
          </el-table-column>
          <el-table-column prop="address" label="审核状态" show-overflow-tooltip width='80'>
            <template v-slot="{row}">
              <div v-if="row.audit==1">通过</div>
              <div v-else>未通过</div>
            </template>
          </el-table-column>
          <el-table-column prop="putaway" label="状态" show-overflow-tooltip  width='60'>
            <template v-slot="{row}">
              <div v-if="row.putaway==0">出售</div>
              <div v-else-if='row.putaway==1'>未出售</div>
              <div v-else-if='row.putaway==2'>仓库</div>
              <div v-else-if='row.putaway==3'>回收中</div>
            </template>
          </el-table-column>
          <el-table-column prop="putaway" label="操作" width="190">
            <template v-slot="{row}">
              <el-button v-if="row.putaway==0" @click="upputaway(row.id)" size="mini">上架</el-button>
              <el-button v-else type="right" @click="down(row.id)" size="mini" icon="el-icon-check"></el-button>
              <el-button @click="compile(row.id)" type="primary" size="mini" icon="el-icon-edit"></el-button>
              <el-button @click="del(row.id)" type="danger" size="mini" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>

          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="ye"
          :page-sizes="[5, 10, 15, 20]" :page-size="80" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

      </div>
    </div>
  </div>
</template>
<script>
import {deletemultiple} from '../../../utils/index'
import { lwjgetShopList, lwjDelete, lwjputshoplist } from '../../../api/index'
export default {
  data() {
    return {
      total: 0,
      tiao: 5,
      ye: 1,
      lien: [],
      list: [],
      value1: '',
      input: "",
      data: [{
        label: '一级 1',
        'menuName': '系统管理',
        'icon': 'el-icon-folder-opened',

        children: [{
          label: '二级 1-1',
          'menuName': '系统管理',
          'icon': 'el-icon-folder-opened',
          children: [{
            label: '三级 1-1-1',
            'menuName': '系统管理',
            'icon': 'el-icon-folder-opened',
          }]
        }]
      }, {
        label: '一级 2',
        'menuName': '系统管理',
        'icon': 'el-icon-folder-opened',
        children: [{
          label: '二级 2-1',
          'menuName': '系统管理',
          'icon': 'el-icon-folder-opened',
          children: [{
            label: '三级 2-1-1',
            'menuName': '系统管理',
            'icon': 'el-icon-folder-opened',
          }]
        }, {
          label: '二级 2-2',
          'menuName': '系统管理',
          'icon': 'el-icon-folder-opened',
          children: [{
            label: '三级 2-2-1',
            'menuName': '系统管理',
            'icon': 'el-icon-folder-opened',
          }]
        }]
      }, {
        label: '一级 3',
        'menuName': '系统管理',
        'icon': 'el-icon-folder-opened',
        children: [{
          label: '二级 3-1',
          'menuName': '系统管理',
          'icon': 'el-icon-folder-opened',
          children: [{
            label: '三级 3-1-1',
            'menuName': '系统管理',
            'icon': 'el-icon-folder-opened',
          }]
        }, {
          label: '二级 3-2',
          'menuName': '系统管理',
          'icon': 'el-icon-folder-opened',
          children: [{
            label: '三级 3-2-1',
            'menuName': '系统管理',
            'icon': 'el-icon-folder-opened',
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      multipleSelection: [],
      tableData: [],
      showTableData: [],
      arr: []

    }
  },
  methods: {
    // 多选删除
    removeGoodFn(){
      deletemultiple('/api/deletemultiple',this.multipleSelection)
      setTimeout(()=>{
        this.getTableFn()
      },500)
    },
    down(id) {
      const arr = {
        id: id,
        putaway: this.tableData.putaway = '0'
      }
      lwjputshoplist(arr).then(res => {
        console.log(res)
        this.getTableFn()
      })

    },
    upputaway(id) {
      console.log(id)
      const arr = {
        id: id,
        putaway: this.tableData.putaway = '1'
      }
      lwjputshoplist(arr).then(res => {
        console.log(res)
        this.getTableFn()
      })

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.tiao = val
      this.showTableData = this.tableData.slice((this.ye - 1) * this.tiao, this.tiao * this.ye)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.ye = val
      // this.showTableData =  this.tableData.slice(this.tiao,this.ye*this.tiao)
      // this.showTableData =  this.tableData.slice(this.ye*this.tiao,this.tiao*(this.ye+1))
      this.showTableData = this.tableData.slice((this.ye - 1) * this.tiao, this.tiao * this.ye)

    },
    delet() {

      // console.log(i)
      // lwjDelete({ id: id }).then(res => {
      //   this.getTableFn()
      // })
    },
    addSearch() {
      //搜索
      this.showTableData = this.showTableData.filter(item => {
        return item.product.indexOf(this.input) > -1
      })
    },
    compile(id) {
      //路由传参
      console.log(id)
      this.$router.push(`/shop_put/${id}`)

    },
    del(id) {
      //操作删除
      console.log(id)
      lwjDelete({ id: id }).then(res => {
        this.getTableFn()
      })
    },
    add() {
      this.$router.push('/shop_one')
    },
    getTableFn() {
      lwjgetShopList().then(res => {
        this.total = res.data.length
        this.tableData = res.data
        this.arr = res.data
        // console.log(this.tableData)
        this.showTableData = this.tableData.slice(0, this.tiao)
        console.log(this.tableData.slice(0, this.tiao))
      })
    },
    toggleSelection(rows) { //表格
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      //获取每一行内的每一项的属性
      this.multipleSelection = val.map(item=>item.id);
    console.log(this.multipleSelection)
    },
    renderContent: function (h, { node, data, store }) {//树状图
      return (<span><i class={data.icon}></i><span style="padding-left: 4px;">{node.label}</span></span>);
    }
  },
  mounted() {
    console.log(this.$route.matched)
    this.list = this.$route.matched  //获取路由内的全部信息
    console.log('aaa')
    this.getTableFn()
  },
  updated() {

  },

  watch: {

  },
  created() {
    this.getTableFn()
    console.log("是否执行");
    console.log(this.tableData);
    // console.log(this.tableData);

  },
}
</script>
<style  lang="scss"  scoped>
.right {
  background-color: #FF5157;
}

::v-deep .el-pagination__jump {
  // width: 800px;
  // display:inline-block;
  display: flex;
  // width: 500px;

  // align-items: center;
}

::v-deep .el-input__inner {
  width: 80%;
  height: 30px;
}

::v-deep .cell {
  text-align: center;
}

::v-deep .el-table th.el-table__cell {
  text-align: center;
}

.el-button--right {
  background: #73D13D;
}

.el-button--success {
  background: #FF9800;
  color: white;
}

.el-button--del {
  background: #FF5157;
  color: white;
}

::v-deep .el-input {
  width: 70%;
  height: 30px;
  // display: flex;
  align-items: center;
}

.box_context {
  width: 100%;
  height: 600px;
  display: flex;
}

.image {
  width: 50px;
  height: 40px;
}

.header {
  width: 57%;
  height: 50px;
  display: flex;

  .input {
    display: flex;
    align-items: center;
    width: 300px;
    margin: 20px;

    p {
      font-size: 12px;
    }
  }

  .input_one {
    width: 500px;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 12px;
  }
}

.button {
  width: 95%;
  height: 30px;
  padding: 10px;
  margin: 20px;
  display: flex;
  align-items: center;
  border: 1px #eaeaea solid;
}

.box {
  display: flex;

  .left {
    width: 300px;
    height: 80vh;
    border: 1px #eaeaea solid;
    margin: 20px;

    .left_header {
      height: 30px;
      line-height: 30px;
      background-color: #61A7CF;
      padding: 5px;
      color: white;
    }
  }

  .from {
    width: 95%;
    // display: flex;
    flex-direction: column,
  }

  .botton {
    width: 100%;
    height: 50px;
    display: flex;
    // background-color: #61A7CF;
  }
}
</style>
